<template>
<u--form
	class="page1"
	labelPosition="left"
	labelWidth="80"
	:model="form"
	:rules="rules"
	ref="uForm"
>
	<u-form-item
		label="汉服名称"
		prop="name"
		borderBottom
	>
		<u--input v-model="form.name" placeholder="汉服的名称信息等"></u--input>
	</u-form-item>
	<u-form-item
		label="购买价格"
		prop="buyPrice"
		borderBottom
	>
		<u--input v-model="form.buyPrice" type="digit" placeholder="进货时汉服的购买价格"></u--input>
	</u-form-item>
	<u-form-item
		label="租赁价格"
		prop="rentalPrice"
		borderBottom
	>
		<u--input v-model="form.rentalPrice" type="digit" placeholder="汉服租赁时的建议价格"></u--input>
	</u-form-item>
	<u-form-item
		label="衣服图片"
		prop="imgUrl"
		borderBottom
	>
		<u-upload
			:fileList="hanfuImg"
			@afterRead="afterRead"
			@delete="deletePic"
			:maxCount="1"
		></u-upload>
	</u-form-item>
	<u-form-item
		label="分类"
		borderBottom
	>
		<view @click="show = true">{{dynastyName||'请选择'}}</view>
	</u-form-item>
	<u-form-item
		label="备注"
		prop="remark"
		borderBottom
	>
		<u--textarea v-model="form.remark" placeholder="请输入备注内容"></u--textarea>
	</u-form-item>
	<u-button @click="submit" type="primary">提交</u-button>
</u--form>
<u-picker 
	:defaultIndex="defaultIndex"
	v-if="show"
	:show="show" 
	:columns="columns" 
	keyName="name" 
	@confirm="cfmHandle"
	@cancel="show = false"
></u-picker>
</template>

<script setup>
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { useGoodsStore } from '@/stores'
import { dynasty } from '@/utils/data'

const goods = useGoodsStore()
const uForm = ref() 
const hanfuImg = ref([])
const show = ref(false) // 朝代选择picker
const defaultIndex = ref([0])
const dynastyName = ref('')
const form = reactive({
	name: '',
	buyPrice: '', // 进货价格
	rentalPrice: '', // 租赁价格
	imgUrl: '',
	dynasty: '', // 朝代ID
	remark: '',
})
const rules = reactive({
	name: [
		{
			required: true,
			message: '请输入汉服的名称',
			trigger: ['blur', 'change']
		}
	]
})
const columns = [ dynasty ]

// 删除图片
const deletePic = (event) => {
	hanfuImg.value.splice(event.index, 1);
	form.imgUrl = ''
};

function afterRead(event){
	const { file } = event
	hanfuImg.value.push({
		...file,
		status: 'uploading',
		message: '上传中',
	});
	// 存储汉服图片
	uni.saveFile({
		tempFilePath: file.url,
		success: function (res) {
			hanfuImg.value[0].status = 'success'
			form.imgUrl = res.savedFilePath
		}
	});
}

function cfmHandle({indexs, value}){
	show.value = false
	const { id, name } = value[0]
	form.dynasty = id
	dynastyName.value = name
	defaultIndex.value = indexs
}

function submit() {
	uForm.value.validate().then(res => {
		let msg;
		if(form.timestamp){
			msg = '编辑'
			if(form.imgUrl!==goods.editTmp.imgUrl){
				// 如果更换了图片就删除旧图片
				uni.removeSavedFile({
					filePath: goods.editTmp.imgUrl,
					success: function (res) {
						console.log(res)
					}
				});
			}
			// 更新商品数据
			goods.editGoods(form)
		}else{
			msg = '添加'
			goods.addGoods({...form, timestamp: Date.now()})
		}
		uni.showToast({icon: 'success', title: `${msg}成功`, duration: 2000})
		setTimeout(uni.navigateBack, 2000)
	}).catch(errors => {
		// uni.$u.toast('校验失败')
	})
}
onLoad(()=>{
	// 编辑的时候先获取数据 然后填充表单
	if(goods.editTmp){
		uni.setNavigationBarTitle({title: "编辑汉服信息"})
		for(let key in goods.editTmp){
			form[key] = goods.editTmp[key]
		}
		// 映射picker选中的数据
		const index = dynasty.findIndex(item=>form.dynasty===item.id)
		if(index>-1){
			defaultIndex.value = [index]
			dynastyName.value = dynasty[index].name
		}
		// 设置默认图片
		if(form.imgUrl){
			hanfuImg.value[0] = {url: form.imgUrl}
		}
	}
})
onUnload(()=>{
	// 清空编辑的临时数据
	goods.setEditTmp(null)
})
</script>

<style>
</style>